<load href="./public/js/highcharts/highcharts.js" />
<div id="nav">
	<ul>
		<li class="current">
			<a href="{:U('Main/index')}">进入系统</a>
		</li>
	</ul>
</div>
<div class="clear"></div>
<div id="content" class="index-page">
	<div class="section map">

	</div>
	<div class="section pic">
		<div class="column column1">
			<div class="c1">
				<a href="javascript:void(0);" class="getchart" rel="chart1" title=""><span>风速1<i id="wind-device-1"></i></span></a>
			</div>
			<div class="c1">
				<a href="javascript:void(0);" class="getchart" rel="chart1" title=""><span>风速2<i id="wind-device-2"></i></span></a>
			</div>
		</div>
		<div class="column column2 images">
			<div class="image-middle-size">
				<a id="viewlarge" href="javascript:void(0);">
					<img id="preview" width="457" height="257" src="{$images[0]['img_2']|default='./public/images/bg.jpg'}" alt="{$v.alt|default='暂无图片'}" />
				</a>
			</div>
			<div class="images-list">
				<ul>
					<volist name="images" id="v">
					<li>
						<a id="image-cid-{$v.cid}" href="javascript:void(0);" rel="{$v.img_2}" title="{$v.alt}">
							<img src="{$v.img_3|default='./public/images/bg.jpg'}" width="107" height="60" alt="{$v.alt|default='暂无图片'}" />
						</a>
					</li>
					</volist>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
		<div class="column column3">
			<table width="100%" cellpadding="5" cellspacing="5">
				<thead>
					<tr>
						<th></th>
						<th>雨量计1</th>
						<th>雨量计2</th>
					</tr>
				</thead>
				<tbody>
					<volist name="totalByRange" id="v">
					<tr>
						<td>{$v.title}</td>
						<td>{$v.val1}</td>
						<td>{$v.val2}</td>
					</tr>
					</volist>
				</tbody>
			</table>

		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('.getchart').click(function(){
		$('.currentChart').removeClass('currentChart');
		var rel = $(this).attr('rel');
		$(this).addClass('currentChart');
		$.get('{:U("Index/getchart")}', {id:rel,'_':Math.random()}, function(res){
			$.dialog('<div style="width:600px;height:400px;">'+res+'</div>').title($('.currentChart').text());
		});
	});
	$('.images-list a').click(function(){
		$('.currentImage').removeClass('currentImage');
		$(this).addClass('currentImage');
		var src = $(this).attr('rel');
		var a = new Image;
		a.src = src;
		a.onload = function(){
			$('#preview').attr('src', this.src);
		}
	});
	$('#viewlarge').click(function(){
		var id = $('.currentImage').size() ? $('.currentImage').attr('id').replace('image-cid-', '') : '';
		$.get('{:U("Index/getimages")}', {id:id}, function(res){
			$.dialog(res).title('');
		}, 'json');
	});

	setInterval(function(){
		//ajax 更新图片
		$.get('{:U("Index/update")}', {}, function(res){
			if(res.data){
				var items = res.data.images, l = items.length, item;
				for(var i = 0; i<l; i++){
					item = items[i];
					var obj = $('#image-cid-' + item.cid);
					$(obj).attr({
						'rel' : item.img_2,
						'alt' : item.alt
					});
					$(obj).find('img').attr({
						'src' : item.img_3,
						'alt' : item.alt
					});
					var previewsrc = $('.currentImage').attr('rel');
					previewsrc = previewsrc ? previewsrc : $('.images-list a:first').attr('rel');
					$('#preview').attr('src', previewsrc);
				}
				$('#wind-device-1').html('('+res.data.rain[0]+'m/s)');
				$('#wind-device-2').html('('+res.data.rain[1]+'m/s)');
			}
		}, 'json');
	}, 5000);		//间隔时间
});
</script>
